<template>
  <Nav :showBlack="true" :title="data.name"></Nav>
  <div class="page" v-if="data.name">
     <div class="vidoeBox" v-if="data.file_ext == 'mp4'">
       <video :src="data.file_key" id="video" controls></video>
     </div>
      <div class="pdfBox" v-if="data.file_ext == 'pdf'">
        <van-swipe indicator-color="white" class="van-swipe-pdf">
          <van-swipe-item v-for="(item,index) in pdfs" :key="item">
            <div class="imgBox" :style="{ backgroundImage: `url(${item})`}"></div>
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>
      </div>
    <div class="bottom">
       <div class="title">{{data.name}}</div>
      <div class="likeBoxWrap">
        <a class="btn" :href="data.buy_url" v-if="data.buy_url">
          购买数字产品
        </a>
      </div>

<!--       <div class="min-title">-->
<!--          {{removeTags(data.descript)}}-->
<!--       </div>-->
    </div>
  </div>
</template>
<script setup>
import Nav from "@/components/nav.vue";
import { removeTags } from '@/utils/utils.js'
import { onMounted, ref, reactive} from "vue";
import { useRoute } from 'vue-router'
import { api } from "@/utils/api.js";
const route = useRoute();
const data = ref({})
const pdfs = ref([])
const mp4 = ref('');
onMounted(() => {
  getRec();
})

async function getRec() {
  const res = await api('/api/course/get_resource_by_id','post',{id:route.query.id})
  data.value = res;
  // if(res.file_ext == 'mp4') {
  // }
  if(res.file_ext == 'pdf') {
    pdfs.value = res.file_key.split(',');
    console.log(pdfs.value)
  }
  console.log(data.value)
}

</script>
<style scoped lang="scss">
.page {
  width: 100%;
  height: 100%;
  background: #262739;
}
.logo {
  height: 50px;
  width: auto;
}
.vidoeBox {
  height: 726px;
  width: 100%;
  background: #262739;
}
.pdfBox {
  height: 1400px;
  width: 100vw;
  background: #262739;
  .imgBox {
    width: 100vw;
    height: 1400px;
    background-position: center;
    background-size:contain;
  }
}
.likeBoxWrap {
  display: flex;
  justify-content: center;
  padding-top: 130px;
  .btn {
    height: 100px;
    padding: 0 30px;
    background: #cf5d27;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border-radius: 10px;
    margin-left: 90px;
  }
}
#video {
  width: 100%;
  height: 100%;
}
.bottom {
  height: calc(100% - 726px);
  background: #f6f0e6;
  border-radius: 40px 40px 0 0;
  padding: 83px;
  .title {
    font-size: 46px;
    margin-bottom: 30px;
    font-weight: bold;
  }
  .min-title {
    font-size: 40px;
    line-height: 1.4;
  }
}
.custom-indicator {
  position: absolute;
  bottom:150px;
  text-align: center;
  color:#fff;
  width: 100vw;
  font-size: 56px;
  letter-spacing: 1em;
}
</style>
